var friends = new Array();
var c_friends_container = 'friends_container';
function draw_friends_container()
{
    _globals["obj"]["interface"]["friends"] = new Array();
    _globals["obj"]["interface"]["friends"]["friends_popup_id"] = false;
    if(_globals["obj"]["friends"])
    {
        for (var i in _globals["obj"]["friends"])
        {
            friends[i] = new Array();
            friends[i]["photo_medium"] = _globals["obj"]["friends"][i]["photo_medium"];
            friends[i]["first_name"] = _globals["obj"]["friends"][i]["first_name"];
            friends[i]["uid"] = _globals["obj"]["friends"][i]["uid"];
            friends[i]["visited"] = _globals["obj"]["friends"][i]["visited"];
        }
    }

    if(friends)
    {
        var k  = 0;
        for (i in friends)
        {
            
            create_friend_div(friends[i], k++ , i);
        }
    }
    // slide effects
    $('#friends_container').mousedown(function (event) {
        release_friends_popup();
        $(this)
        .data('down', true)
        .data('x', event.clientX)
        .data('scrollLeft', this.scrollLeft);
        return false;
    }).mouseup(function (event) {
        $(this).data('down', false);
    }).mousemove(function (event) {
        if(_globals["obj"]["interface"]["friends"]["friends_popup_id"] == false)
        {
            if ($(this).data('down') == true) {
                this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
            }
        }
    }).mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
    }).css({
        'overflow' : 'hidden',
        'cursor' : '-moz-grab'
    });
    // mouse out of game screen
    $(window).mouseout(function (event) {
        if ($('#friends_container').data('down')) {
            try {
                if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
                    $('#friends_container').data('down', false);
                }
            } catch (e) {}
        }
    });
    _getE(c_friends_container).style.visibility = 'visible';
}

function release_friends_popup()
{
    if(_globals["obj"]["interface"]["friends"]["friends_popup_id"])
    {
        if(_getE(_globals["obj"]["interface"]["friends"]["friends_popup_id"]))
        {
            document.body.removeChild(_getE(_globals["obj"]["interface"]["friends"]["friends_popup_id"]))
            _globals["obj"]["interface"]["friends"]["friends_popup_id"] = false;

        }
    }
}


function create_friend_div(arr, index, uid)
{
    _globals["obj"]["interface"]["friends"][uid] = new Array();

    var friend_div = _new('DIV');
    friend_div.id = 'fd_'+uid;
    _globals["obj"]["interface"]["friends"][uid]["id"] = friend_div.id;


    if(arr['visited'])
    {
        friend_div.className = 'friend_div_visited';
    }
    else
    {
        friend_div.className = 'friend_div';
    }
    friend_div.style.left = index * 100;
    _getE(c_friends_container).appendChild(friend_div);

    var rel = _new('DIV');
    rel.className = 'friend_div_rel';
    friend_div.appendChild(rel);

    var friend_div_image_container = _new('DIV');
    friend_div_image_container.className = 'friend_div_image_container';
    rel.appendChild(friend_div_image_container);

    var friend_div_exp_container = _new('DIV');
    friend_div_exp_container.className = 'friend_div_exp_container';
    friend_div_exp_container.innerHTML = _globals["obj"]["friends"][uid]["exp"];
    rel.appendChild(friend_div_exp_container);

    var friend_div_image_container_a = _new('A');
    friend_div_image_container_a.className = 'friend_div_image_container_a';
    friend_div_image_container_a.src = arr["photo_medium"];
    friend_div_image_container_a.alt = arr["first_name"];
    friend_div_image_container_a.title = arr["first_name"];
    friend_div_image_container_a.href = 'javascript:void(0)';
    friend_div_image_container_a.style.background = 'url('+arr["photo_medium"]+') center no-repeat';
    friend_div_image_container.appendChild(friend_div_image_container_a);



    friend_div_image_container.onclick = function()
    {
        friend_div_item_mouse(uid,'onclick');
    }
    friend_div_image_container.onmouseup = function()
    {
        friend_div_item_mouse(uid,'onmouseup');
    }
    friend_div_image_container.onmousedown = function()
    {
        friend_div_item_mouse(uid,'onmousedown');
    }
    friend_div_image_container.onmouseover = function()
    {
        friend_div_item_mouse(uid,'onmouseover');
    }
    friend_div_image_container.onmouseout = function()
    {
        friend_div_item_mouse(uid,'onmouseout');
    }

//var img = _new('IMG');
//img.src = arr["photo_medium"];
//img.alt = arr["first_name"];
//img.title = arr["first_name"];
//friend_div_image_container.appendChild(img);
}

function friend_div_item_mouse(uid,type)
{
    // all mouse functions for friend avatar item will be placed here
    if(type && (type == 'onclick'))
    {
        release_friends_popup();
        // draw mini friend info
        draw_mini_friend_info(uid);
    }
}

function draw_mini_friend_info(uid)
{
    var arr = friends[uid];
    if(!arr) return;
    var target_div = _getE(_globals["obj"]["interface"]["friends"][uid]["id"]);
    
    var popup = _new('DIV');
    popup.id = 'fpopup_'+uid;
    _globals["obj"]["interface"]["friends"][uid]["popup_id"] = popup.id;
    _globals["obj"]["interface"]["friends"]["friends_popup_id"] = popup.id;

    var sizes = getBounds(target_div);
    
    popup.style.left = sizes.left - _getE(c_friends_container).scrollLeft;
    popup.style.top = sizes.top - 100;


    if(arr['visited'])
    {
        popup.className = 'mini_friend_popup_visited';
    }
    else
    {
        popup.className = 'mini_friend_popup';
    }

    var imageholder =_new('DIV');
    imageholder.className = 'friendpopup_div_image_container_holder';
    popup.appendChild(imageholder);

    var friend_div_image_container_a = _new('A');
    friend_div_image_container_a.className = 'friendpopup_div_image_container_a';
    friend_div_image_container_a.href = 'javascript:void(0)';
    friend_div_image_container_a.style.background = 'url('+arr["photo_medium"]+') center no-repeat';
    imageholder.appendChild(friend_div_image_container_a);
    friend_div_image_container_a.onclick = function(){
        release_friends_popup()
    };

    var visitLink = _new('DIV');
    visitLink.className = 'friendpopup_div_visitLink';
    visitLink.onclick = function(){
        // посещение друга
        friend_visit(arr['uid']);
    };
    visitLink.innerHTML = 'посетить';

    popup.appendChild(visitLink);

    document.body.appendChild(popup);
}
